<template>
  <div class="page-content">
    <nav-bar title="掌心有信" leftIcon="" backgroundColor="no"></nav-bar>
    <!-- 背景图片 -->
    <img class="home-bg" src="@/static/img/bg.jpg" alt="">
    <!-- 轮播 -->
    <tm-swiper :interval="5000" :round="4" :margin="32"  :autoplay="true"  :indicator-dots="true" :list="carouselList"></tm-swiper>
    <!-- 灯笼 -->
    <div class="denglong-box">
      <div class="dl-item" v-for="item in lanternData" :key="item.id" @click="selectClick(item)">
        <img class="dl-item-img" src="@/static/img/lantern.png" alt="暂无">
        <div class="dl-item-content">
          <div class="dl-item-content-imgbox">
            <img src="@/static/img/hand.png" alt="暂无">
          </div>
          <div class="dl-item-content-name">{{ item.fjrUserName }}</div>
        </div>
      </div>
    </div>
    <!-- 手 -->
    <div class="fish" @click="getEmail">
      <img src="@/static/img/hand.png" alt="">
      <div class="fish-title">
        <uni-icons type="loop" size="18" color="#ffffff"></uni-icons>
        <span>换一批</span>
      </div>
    </div>
    
    <div class="bottom-navigation">
      <div class="nav-item" v-for="item in bomNav" :key="item.id" @click="navbarClick(item)">
        <img :src="item.img" alt="">
        <div class="nav-item-title">{{ item.title }}</div>
      </div>
    </div>
    <email-chat ref="emailChatRef" :list="listItem"></email-chat>
    <!-- 弹出框 -->
    <uni-popup
      ref="replyRef"
      type="dialog"
    >
      <uni-popup-dialog
        title="提示"
        content="您确定要回复吗"
        :before-close="true"
        @close="replyClose"
        @confirm="replyConfirm"
      >
      </uni-popup-dialog>
    </uni-popup>
  </div>
</template>

<script>
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
import tmSwiper from "@/tm-vuetify/components/tm-swiper/tm-swiper.vue"
import emailChat from '@/components/email-chat/index.vue'
import navBar from '@/components/nav-bar/index.vue'
let that = null
export default {
  components: {
    tmIcons,
    tmSwiper,
    emailChat,
    navBar
  },
  // mixins: [navbar],
  data () {
    return {
      carouselList: [
        'https://picsum.photos/800?jv=34',
        'https://picsum.photos/800?jv=74',
        'https://picsum.photos/800?jv=3',
        'https://picsum.photos/800?jv=5'
      ],
      lanternData: [
        {
          id: 1,
          img: '',
          name: '张三'
        },
        {
          id: 2,
          img: '',
          name: '李四'
        },
        {
          id: 3,
          img: '',
          name: '王五'
        },
        {
          id: 4,
          img: '',
          name: '珍六撒发射点发生'
        },
        {
          id: 5,
          img: '',
          name: '老七'
        },
        {
          id: 6,
          img: '',
          name: '老八豆豆都'
        }
      ],
      bomNav: [
        {
          id: 1,
          title: '信件',
          img: '../../static/img/letter.png',
          path: 'receive-letter'
        },
        {
          id: 2,
          title: '写信',
          img: '../../static/img/write-letter.png',
          path: 'write-letter'
        },
        {
          id: 3,
          title: '我的',
          img: '../../static/img/my.png',
          path: 'person-center'
        },
      ],
      listItem: {}
    }
  },
  async onLoad (options) {
    that = this
    // 随机获取数据
    this.randomReq()
  },
  computed: {
    userProfile () {
      return this.$store.state.userProfile || {
        userInfo: {}
      }
    }
  },
  methods: {
    navbarClick (obj) {
      uni.navigateTo({
        url: `/pages/${obj.path}/index`
      })
    },
    async randomReq () {
      this.lanternData = await this.$store.dispatch('getRandomlist')
      return this.lanternData
    },
    async getEmail () {
      this.listItem = await this.randomReq()
      // this.$refs.emailChatRef.open()
    },
    selectClick (list) {
      this.listItem = list
      this.$refs.replyRef.open()
    },
    replyClose () {
      this.$refs.replyRef.close()
    },
    replyConfirm () {
      this.replyClose()
      this.$refs.emailChatRef.open()
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-big-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  .popup-content {
    flex: 1;
  }
}
.denglong-box {
  padding-top: 20rpx;
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 250rpx);
  .dl-item {
    width: 210rpx;
    height: 210rpx;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    &-img {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 300rpx;
      height: 300rpx;
      transform: translate(-50%, -50%);
      z-index: -2;
    }
    &-content {
      width: 128rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &-imgbox {
        width: 80rpx;
        height: 80rpx;
        border: 6rpx solid #ffffff;
        border-radius: 50%;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-name {
        padding-top: 10rpx;
        width: 100%;
        font-size: 22rpx;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    &:first-child {
      place-self: end end;
      .dl-item-content-imgbox {
        border-color: #F03442 !important;
      }
    }
    &:nth-child(2) {
      place-self: start end;
      .dl-item-content-imgbox {
        border-color: #4EB0F1 !important;
      }
    }
    &:nth-child(3) {
      place-self: end end;
      .dl-item-content-imgbox {
        border-color: #ECF400 !important;
      }
    }
    &:nth-child(4) {
      place-self: end start;
      .dl-item-content-imgbox {
        border-color: #81F789 !important;
      }
    }
    &:nth-child(5) {
      place-self: start start;
      .dl-item-content-imgbox {
        border-color: #ffffff !important;
      }
    }
    &:nth-child(6) {
      place-self: end start;
      .dl-item-content-imgbox {
        border-color: #A873F7 !important;
      }
    }
  }
}
</style>
